import React,{useEffect} from 'react'
import * as echarts from 'echarts'

export default function ChartBar(props) {
  const {optionsData = null, id = 'default-id', width = 600, height = 200,seriesName} = props;
 
  useEffect(() => {
    let month=optionsData.month
    let count=optionsData.count
    let count1=optionsData.count1
    //初始化echarts
    var myChart = echarts.init(document.getElementById(id))
    var options={
      xAxis:{
        data:month
      },
      yAxis:{},
      series:[
        {
          name:seriesName,
          type:'line',
          data:count,
          markPoint:{
            data:[
              {
                type:'max'
              },
              {
                type:'min'
              }
            ]
          },
          markLine:{
            data:[
              {
                type:'average'
              }
            ]
          },
          markArea:{
            data:[
              [
                {
                  xAxis:'1月'
                },
                {
                  xAxis:'3月'
                }
              ],
              [
                {
                  xAxis:'10月'
                },
                {
                  xAxis:'12月'
                }
              ]
            ]
          },
          smooth:true,
          lineStyle:{
            color:'springgreen',
            type:'dotted'
          }
          // areaStyle:{
          //   color:'skyblue'
          // }
        },
        {
            name:'另外1机构',
            type:'line',
            data:count1,
        }
      ]
    }
    myChart.setOption(options);
  })
  return (
    <div id={id} style={{width: width, height: height}}>222</div>
  )
}
